<script setup lang='ts'>
// 自定义 规则
interface pdcItem {
  "id": string,
  "name": string,
}

import { ref, reactive, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { https } from '@/api/api'
import { navigateTo, showToast } from '@/public';
import Bottom from '@/components/bottom/index.vue'
import { usePdcStore } from '@/store';
//const { } = defineProps<Props>();
const pdcStore = usePdcStore();
const statusBarHeight = computed(() => uni.getSystemInfoSync().statusBarHeight)
/**
 * @property 变量
 */
// 省市区 全部数据
const data = ref<Array<pdcItem>>([]);
// 市的数据
const cityList = ref<Array<pdcItem>>([]);
// 区的数据
const disList = ref<Array<pdcItem>>([]);
// 选择的省市区id 
const pcdData = reactive({
  province: {
    name: '全国',
    id: 'all'
  },
  city: {
    name: '',
    id: ''
  },
  district: {
    name: '',
    id: '',
  }
})
/**
 * @property  所有请求以api开头 如:apiDataInfo
 */
// 获取已有省市区
const apiPdcList = async (area: string = '0'): Promise<Array<pdcItem>> => {
  return new Promise(async reslove => {
    const res = await https({
      mode: 'area',
      name: 'apiGetAreaList',
      data: {
        area
      }
    })
    if (res.code !== 0) showToast(res.data.msg);
    reslove(res.data?.list || [])
  })
}

/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */
// 清空数据
const emptyPcd = () => {
  pcdData.province.name = '';
  pcdData.province.id = '';
  pcdData.city.name = '';
  pcdData.city.id = '';
  pcdData.district.name = '';
  pcdData.district.id = '';
  // 市的数据
  cityList.value = [];
  // 区的数据
  disList.value = [];
}
// 点击了省市区
const clickPcd = async (pcd: string, item: pdcItem) => {
  // 省的数据
  if (pcd === 'pro') {
    if (item.id === 'all') {
      emptyPcd();
      pcdData.province.name = '全国';
      pcdData.province.id = 'all';
      return;
    }
    if (pcdData.province.id === item.id) {
      emptyPcd();

      return;
    }
    pcdData.province.name = item.name;
    pcdData.province.id = item.id;

    // 清空市区 的数据
    pcdData.city.name = '';
    pcdData.city.id = '';
    pcdData.district.name = '';
    pcdData.district.id = '';
    //
    cityList.value = await apiPdcList(item.id + '')
    disList.value = []
  }
  if (pcd === 'city') {
    // 省 是否存在
    if (pcdData.province.id === '') {
      // 获取省
      return showToast('请先选择省')
    }
    if (pcdData.city.id === item.id) {
      pcdData.city.name = '';
      pcdData.city.id = '';
      pcdData.district.name = '';
      pcdData.district.id = '';
      // 清空区数据
      disList.value=[]
      return;
    }
    pcdData.city.name = item.name;
    pcdData.city.id = item.id;
    // 清空区的数据
    pcdData.district.name = '';
    pcdData.district.id = '';
    //
    disList.value = await apiPdcList(item.id + '');
  }
  if (pcd === 'dis') {
    // 省 是否存在
    if (pcdData.province.id === '' || pcdData.city.id === '') {
      // 获取省
      return showToast('请先选择省市')
    }
    if (pcdData.district.id === item.id) {
      pcdData.district.name = '';
      pcdData.district.id = '';
      return;
    }
    pcdData.district.name = item.name;
    pcdData.district.id = item.id;
  }
}
// 点击了确定
const clickConfirm = () => {
  pdcStore.setPdcInfo({
    province: pcdData.province.name,
    city: pcdData.city.name,
    district: pcdData.district.name
  })
  pdcStore.pcdId = {
    p: pcdData.province.id, //省
    c: pcdData.city.id, //市
    d: pcdData.district.id //区
  };
  const pages = getCurrentPages(); // 获取当前挂载的路由数组
  const prePage = pages[pages.length - 2] //获取 上一个页面
  prePage.$vm.createMarker();
  navigateTo('/pages/index/index', 0);
  // mapStore.isRefresh
}
/**
 * @property 内置方法
 */
onLoad(async () => {
  // 获取省市区
  data.value = await apiPdcList();
  pcdData.province.name = pdcStore.pdc.province as string;
  pcdData.province.id = pdcStore.pcdId.p || 'all';
  pcdData.city.name = pdcStore.pdc.city as string;
  pcdData.city.id = pdcStore.pcdId.c;
  pcdData.district.name = pdcStore.pdc.district as string;
  pcdData.district.id = pdcStore.pcdId.d;
  // 获取市
  if (pcdData.province.id && pcdData.province.id !== 'all') {
    cityList.value = await apiPdcList(pcdData.province.id + '')
  }
  // 获取市
  if (pcdData.city.id && pcdData.city.id !== 'add') {
    disList.value = await apiPdcList(pcdData.city.id + '')
  }
})

</script>
<template>
  <div class="w-[100vw] h-[100vh] flex flex-col">
    <up-navbar title="选择省市区" :autoBack="true" placeholder>
    </up-navbar>
    <div class="w-[100%] flex">
      <div class="pcd">省</div>
      <div class="pcd">市</div>
      <div class="pcd">区</div>
    </div>
    <div class="flex-1 overflow-hidden flex">
      <div class="flex-1 overflow-hidden" style="border-right: 2rpx solid #f2f2f2;">
        <scroll-view class="w-[100%] h-[100%] " scroll-y>
          <text class="pcdItem block" @click="clickPcd('pro', { id: 'all', name: '全国' })" :style="{
            color: 'all' === pcdData.province.id ? 'red' : 'none',
          }">全国</text>
          <div class="flex-col flex">
            <text class="pcdItem" v-for="item in data" :key="item.id" @click="clickPcd('pro', item)" :style="{
              color: item.id === pcdData.province.id ? 'red' : 'none',
            }">{{ item.name }}</text>
          </div>

        </scroll-view>
      </div>
      <div class="flex-1 overflow-hidden" style="border-right: 2rpx solid #f2f2f2;">
        <scroll-view class="w-[100%] h-[100%] " scroll-y>
          <div class="flex-col flex">
            <text class="pcdItem" v-for="item in cityList" :key="item.id" @click="clickPcd('city', item)" :style="{
              color: item.id === pcdData.city.id ? 'red' : 'none',
            }">{{ item.name }}</text>
          </div>

        </scroll-view>
      </div>
      <div class="flex-1 overflow-hidden" style="border-right: 2rpx solid #f2f2f2;">
        <scroll-view class="w-[100%] h-[100%] " scroll-y>
          <div class="flex-col flex">
            <text class="pcdItem" v-for="item in disList" :key="item.id" @click="clickPcd('dis', item)" :style="{
              color: item.id === pcdData.district.id ? 'red' : 'none',
            }">{{ item.name }}</text>
          </div>

        </scroll-view>
      </div>
    </div>
    <div class="w-[100%] h-68 pl-3 pr-3 mt-3">
      <Bottom @click="clickConfirm" />
    </div>
    <div :style="{
      height: statusBarHeight + 'px'
    }"></div>
  </div>
</template>
<style lang="scss" scoped>
.pcd {
  flex: 1;
  text-align: center;
  line-height: 48rpx;
  color: #0091FF;
}

.pcdItem {
  line-height: 48rpx;
  font-size: 24rpx;
  text-align: center;
}
</style>